<template>
  <div id="bar" :style="size">
    <div class="dragRectTop"></div>
    <Echarts :size="size" :options="options" />
    <div class="dragRectBottom"></div>
  </div>

</template>

<script>
import Echarts from '@/components/Echarts'
var data = [70, 34, 60, 78, 69]
var titleName = ['疫苗数量', '核酸测验', '普通筛选', '医生接种', '护士接种']
var valdata = [702, 350, 610, 793, 664]
var myColor = ['#1089e7', '#f57474', '#56d0e3', '#f8b448', '#8b78f6']
export default {
  data () {
    return {
      options: {
        title: {
          text: '新冠疫情各项进度',
          left: 'center',
          top: '5',
          textStyle: {
            color: 'rgba(255,255,255,1)',
            fontSize: '20'
          }
        },
        // tooltip: {
        //   trigger: 'axis',
        //   axisPointer: {
        //     type: 'shadow'
        //   }
        // },
        // legend: {
        //   data: ['2011年', '2012年']
        // },
        grid: {
          top: '20%',
          left: '10%',
          // right: '4%',
          bottom: '0%',
          containLabel: true
        },
        xAxis: {
          // type: 'value',
          // boundaryGap: [0, 0.01]
          show: false
        },
        yAxis: [{
          show: true,
          // type: 'category',
          data: titleName,
          inverse: true,
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#fff'
          }
        },
        {
          show: true,
          inverse: true,
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          data: valdata,
          axisLabel: {
            color: '#fff',
            fontSize: 12
          }
        }],
        series: [
          {
            name: '条',
            type: 'bar',
            // 在单个图表实例中存在多个 y轴的时候有用
            yAxisIndex: 0,
            data: data,
            // 间距
            barGategoryGap: 50,
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: 20,
                color: function(params) {
                  // console.log(params);
                  var num = myColor.length
                  return myColor[params.dataIndex % num]
                }
              }
            },
            label: {
              normal: {
                show: true,
                position: 'inside',
                formatter: '{c}%',
                color: '#fff'
              }
            }
          },
          {
            name: '框',
            type: 'bar',
            yAxisIndex: 1,
            barGategoryGap: 50,
            data: [100, 100, 100, 100, 100],
            barWidth: 15,
            itemStyle: {
              normal: {
                color: 'none',
                borderColor: '#00c1de',
                borderWidth: 3,
                barBorderRadius: 15
              }
            }
          }
        ]
      },
      size: {
        width: "100%",
        height: "3.875rem"
      },
      year: 2000
    }
  },
  components: {
    Echarts
  },
  mounted () {

  }
}
</script>

<style scoped>
	#bar{
		background-image: url(../assets/line.png);
		position: relative;
		border: 1px solid rgba(255, 255, 255, 0.1);
	}
	.dragRectTop{
		width: 100%;
		height: 10px;
		position: absolute;
		top: 0;
		left: 0;
	}
	.dragRectTop::before{
		width: 10px;
		height: 10px;
		border-left: 2px solid #02a6b5;
		border-top: 2px solid #02a6b5;
		content: "";
		display: block;
		position: absolute;
		left: 0;
		top: 0;

	}
	.dragRectTop::after{
		width: 10px;
		height: 10px;
		border-right: 2px solid #02a6b5;
		border-top: 2px solid #02a6b5;
		content: "";
		display: block;
		position: absolute;
		right: 0;
		top: 0;

	}
	.dragRectBottom{
		width: 100%;
		height: 10px;
		position: absolute;
		bottom: 0;
		left: 0;
	}
	.dragRectBottom::before{
		width: 10px;
		height: 10px;
		border-left: 2px solid #02a6b5;
		border-bottom: 2px solid #02a6b5;
		content: "";
		display: block;
		position: absolute;
		left: 0;
		bottom: 0;

	}
	.dragRectBottom::after{
		width: 10px;
		height: 10px;
		border-right: 2px solid #02a6b5;
		border-bottom: 2px solid #02a6b5;
		content: "";
		display: block;
		position: absolute;
		right: 0;
		bottom: 0;

	}
</style>